<template>
    <div class="loginBackground" >
        <el-form :model="loginForm"
                 v-loading="loading"
                 element-loading-text="正在登录···"
                 ref="loginForm" :rules="rules" class="loginContainer" >
            <h3>Tarry Admin</h3>
            <el-form-item prop="username" required>
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password" required>
                <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                <el-form-item prop="code">
                    <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="验证码,点击验证码刷新"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-image style="margin-left: 20px; height: 40px; width: 120px;"  :src="captchaUrl" @click="updateCaptcha"></el-image>
                </el-col>
            </el-row>
            <el-checkbox v-model="loginForm.rememberMe " style="color: #fff">记住我</el-checkbox>
            <el-button style="margin-left: 30px;" type="primary" @click.prevent="submitForm('loginForm')">登陆</el-button>
        </el-form>
    </div>
</template>

<script>

  export default {
    data() {
      return {
        loading: false,
        rules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{ required: true, message: '请输入密码', trigger: 'blur'}],
          code: [{ required: true, message: '请输入验证码', trigger: 'blur'}],
        },
        loginForm: {
          username: 'admin',
          password: '123',
          code: '',
          rememberMe: false
        },
        captchaUrl: '/captcha?time=' + new Date()
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            this.postRequest('/login',this.loginForm).then( resp => {
              if (resp) {
                this.loading = false
                const token = resp.obj.tokenHead + resp.obj.token
                window.sessionStorage.setItem('token',token)
                //清空菜单
                this.$store.commit('initRoutes', []);
                //页面跳转
                let path = this.$route.query.redirect;
                this.$router.replace((path == '/' || path == undefined) ? '/home' : path)
              }
            })
          } else {
            this.loading = false
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      updateCaptcha(){
        this.captchaUrl = '/captcha?time=' + new Date()
      }
    }
  }
</script>


<style scoped>
.loginBackground{
    display: inline-block;
    height: 100%;
    width: 100%;
    background-image: url('../assets/background.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.loginContainer {
  /*background: #e7bf5b;*/
  background-clip: padding-box;
  box-shadow: 0 0 25px #cac6c6;
  border-radius: 15px;
  margin: 200px auto;
  padding: 15px 35px 15px 35px;
  width: 360px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
</style>
